<script charset="utf-8" type="text/javascript">
    /* Title settings */
    title = "October Browser Statistics";
    titleXpos = 390;
    titleYpos = 85;

    /* Pie Data */
    pieRadius = 130;
    pieXpos = 150;
    pieYpos = 180;
    pieData = [1149422, 551315, 172095, 166565, 53329, 18060, 8074, 1941, 1393, 1104, 2110];
    pieLegend = [
        "%%.%% – Firefox",
        "%%.%% – Internet Explorer",
        "%%.%% – Chrome",
        "%%.%% – Safari",
        "%%.%% – Opera",
        "%%.%% – Mozilla",
        "%%.%% – Mozilla Compatible Agent",
        "%%.%% – Opera Mini",
        "%%.%% – SeaMonkey",
        "%%.%% – Camino",
        "%%.%% – Other"];

    pieLegendPos = "east";

    $(function () {
        var r = Raphael("chartHolder");

        r.text(titleXpos, titleYpos, title).attr({"font-size": 20});

        var pie = r.piechart(pieXpos, pieYpos, pieRadius, pieData, {legend: pieLegend, legendpos: pieLegendPos});
        pie.hover(function () {
            this.sector.stop();
            this.sector.scale(1.1, 1.1, this.cx, this.cy);
            if (this.label) {
                this.label[0].stop();
                this.label[0].attr({r: 7.5});
                this.label[1].attr({"font-weight": 800});
            }
        }, function () {
            this.sector.animate({transform: 's1 1 ' + this.cx + ' ' + this.cy}, 500, "bounce");
            if (this.label) {
                this.label[0].animate({r: 5}, 500, "bounce");
                this.label[1].attr({"font-weight": 400});
            }
        });

    });
</script>

<div id="chartHolder"></div>
